<template>
  <div class="app-container">
    <el-table
      ref="manufacturing"
      :row-key="keys"
      :data="tableData"
      border
      style="width: 50%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="sort" label="排序" width="80" align="center">
      </el-table-column>
      <el-table-column prop="apiId" label="apiId" width="80" align="center">
      </el-table-column>
      <el-table-column prop="distName" label="标签" width="180">
      </el-table-column>
      <el-table-column prop="value" label="开关">
        <template slot-scope="scoped">
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949"
            v-model="scoped.row.value"
            @change="changeSwitch($event, scoped.row, scoped.$index)"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import { getApiSeeting, updateApiSeeting, updateSort } from '@/api/sys';
export default {
  name: 'ApiSeeting',
  data() {
    return {
      tableData: []
    };
  },
  created() {
    this.hanleGetApiSeeting();
  },
  mounted() {
    this.$nextTick(() => {
      this.rowDrop();
    });
  },
  methods: {
    rowDrop() {
      const tbody = this.$refs.manufacturing.$el.querySelector(
        '.el-table__body-wrapper > table > tbody'
      );
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
          const params = _this.tableData.map(item => {
            if (item.sort !== 0 && item.sort !== '0') {
              const a = {};
              a.apiId = item.apiId === undefined ? item.id : item.apiId;
              a.sort = item.sort;
              return a;
            }
          });
          const newParams = params.filter(
            item => item !== null && item !== undefined
          );
          _this.handleUpdateSort(newParams);
        }
      });
    },
    // 获取用户列表
    async handleUpdateSort(params) {
      const res = await updateSort(params);
      if (res.data.code === 200) {
        this.hanleGetApiSeeting();
      }
    },
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          if (evt.oldIndex === evt.newIndex) return;
          const oldItem = this.tableTitle[evt.oldIndex - 1];
          const newItem = this.tableTitle[evt.newIndex - 1];
          this.$set(this.tableTitle, evt.newIndex - 1, oldItem);
          this.$set(this.tableTitle, evt.oldIndex - 1, newItem);
        }
      });
    },
    // 获取用户列表
    async hanleGetApiSeeting() {
      const res = await getApiSeeting();
      const newRes = res.data.data.map(item => {
        item.value = item.value === 'true' ? true : false;
        item.keys = Math.random().toFixed(4);
        return item;
      });
      this.tableData = [];
      this.$nextTick(() => {
        this.tableData = newRes;
      });
      this.$set(this.tableData);
    },
    async changeSwitch(e, value, index) {
      try {
        const data = { key: value.key, value: String(e) };
        const res = await updateApiSeeting(data);
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '更新成功',
            type: 'success',
            duration: 2000
          });
          this.hanleGetApiSeeting();
        } else {
          this.$notify({
            title: 'fail',
            message: '更新失败',
            type: 'fail',
            duration: 2000
          });
          this.hanleGetApiSeeting();
        }
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>
<style scoped></style>
